<template>
    <div class="interview-list">
      <scroller :lock-x="true" scrollbar-y :bounce="true" v-ref:scroller :height="scrollerHeight">
        <div>
          <div v-for="course in courseList" class="course-list">
            <div v-touch:tap="goToCourse(course.cid)">
              <img class="course-list-img" :src=course.pic >
              <div class="course-list-info">
                <p class="course-list-title">{{course.title}}</p>
                <p class="course-list-subtitle">{{course.subtitle}}</p>
                <p class="course-list-state"  style="color:#00b0f0;">¥{{course.price}}</p>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
</template>
<style lang="less">
  .course-list {
    background: white;
    .course-list-title {
      color: #000;
      font-size: 0.8rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .course-list-subtitle {
      color: #898989;
      font-size: 0.7rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 auto;
    }
  }
</style>
<script>
  import Scroller from 'vux/scroller'
  import IctTitlebar from '../../../components/IctTitleBar.vue'
  import {menberActions} from '../../../vuex/actions'
  import {menberGetters} from '../../../vuex/getters'
  import {eventMap} from '../../../frame/eventConfig'
  import {statisticsMap} from '../../../statistics/statisticsMap'
  export default {
    vuex: {
      actions: {
        loadInterviewList: menberActions.loadInterviewList
      },
      getters: {
        interviewList: menberGetters.interviewList
      }
    },
    data () {
      return {
        scrollerHeight: '590px',
        isLoadSuccess: true,
        courseList: [
          {
            cid: 0,
            title: '有钱就是这么任性',
            pic: 'https://source.ichangtou.com/file/bc/material/course/stock/surface.jpg',
            subtitle: '百合，lip教你如何用钱生钱',
            price: 19.9
          }
        ]
      }
    },
    watch: {
      'interviewList': function () {
        this.setScrollerHeight()
      }
    },

    created () {
      this.loadInterviewList().then(
        function () {
          return {
            isLoadSuccess: true
          }
        },
        function (err) {
          console.log('err', err)//获取信息错误
          return {
            isLoadSuccess: false
          }
        }
      )
    },

    methods: {
      setScrollerHeight () {
        const me = this
        setTimeout(
          function () {
            me.scrollerHeight = (window.document.body.offsetHeight - 100) + 'px'
            me.$nextTick(() => {
              me.$refs.scroller.reset({
                top: 0
              })
            })
          }, 500
        )
      },
      goToInterviewRecord (interviewId) {
        this.$dispatch(eventMap.STATISTIC_EVENT, statisticsMap.INTERVIEW, {
          '访谈Id': interviewId
        })
        this.$route.router.go(`/menber-invitation-record?id=${interviewId}`)
      },

      /**
       * 跳转到相应的课程页
       */
      goToCourse (cid) {
        // window.alert('敬请期待')
        this.$route.router.go(`/exclusive-course-record?id=${cid}`)
      }
    },
    components: {
      IctTitlebar,
      Scroller
    }
  }
</script>
